<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <div class="cursor-pointer" style="width: 100px">
        {{ label }}
        <t-popup-edit
          v-model="label"
          class="bg-accent text-white"
          v-slot="scope"
        >
          <t-input
            dark
            color="white"
            v-model="scope.value"
            dense
            autofocus
            counter
            @keyup.enter="scope.set"
          >
            <template v-slot:append>
              <t-icon name="edit" />
            </template>
          </t-input>
        </t-popup-edit>
      </div>

      <div class="cursor-pointer" style="width: 100px">
        {{ label2 }}
        <t-popup-edit
          v-model="label2"
          :cover="false"
          :offset="[0, 10]"
          v-slot="scope"
        >
          <t-input
            color="accent"
            v-model="scope.value"
            dense
            autofocus
            counter
            @keyup.enter="scope.set"
          >
            <template v-slot:prepend>
              <t-icon name="record_voice_over" color="accent" />
            </template>
          </t-input>
        </t-popup-edit>
      </div>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        label: ref('Click me'),
        label2: ref('Also click me'),
      };
    },
  };
</script>
